@php
    /** @var \App\Model\Goods[] $goods */
    /** @var \App\Model\Category $category_one */
    /** @var \App\Model\Category $category_two */
    /** @var \App\Model\Category $category_three */
@endphp
@extends('home.app')


@section('title', 'Eocmart')

@section('content')
    <div
        class="clearfix pa0-xs landing landing--brenda landing--248 overflow bgcolor-white col-12 tst-landingPageBrenda">
        <div class="container">
            <!--顶部图片层 shop now-->
            <div class="row one-slot tst-row">
                <div class="slot col12 tst-slot">
                    <div class="module"><a href="/pages/all-categories"
                                           title="The exclusive collection" aria-label="The exclusive collection"
                                           class="module__link module__heroContainer no-underline tst-module tst-hero">
                            <article class="module__contentContainer  module--hero">
                                <figure
                                    class="reset-lineHeight module__image no-underline resp-ratio  FF1E848C65DD970C606">
                                    @if (isMobile())
                                        <picture class="module__media resp-img tst-bkgElem tst-image lazy-loaded" style="margin-top: 0">
                                            <img class="resp-img lazy-loaded" style="margin-top: 0" src="{{$banner ?: './images/top-home.jpg'}}" alt="">
                                        </picture>
                                    @else
                                        <picture class="module__media resp-img tst-bkgElem tst-image lazy-loaded" >
                                            <img class="resp-img lazy-loaded" src="{{$banner ?: './images/top-home.jpg'}}" alt="">
                                        </picture>
                                    @endif

                                </figure>
                                <div class="module__content  tst-cntElem-wrapper">
                                    <div class="module__contentGroup module__contentGroup--pos-cc"><span
                                            class="module__ce module__title color-white module__ce--f-xs-18 module__ce--f-sm-18 module__ce--f36 bold tst-cntElem tst-title black-gradient"
                                        >The exclusive collection</span>
                                        <div class="module__ce module__ctaGroup"><p
                                                class="module__ce module__cta bold module__ce--f13 color-white  tst-cntElem tst-cta"
                                            ><span class="module__ctaLabel black-gradient">SHOP NOW</span>
                                            </p></div>
                                    </div>
                                </div>
                            </article>
                        </a></div>
                </div>
            </div>
            <!--商品列表 最多5个商品-->
            <div class="row one-slot tst-row">
                <div class="slot col12 tst-slot">
                    <section class="moduleSet tst-module tst-set">
                        <div
                            class="moduleSet__prods moduleSet__prods--carrousel tst-bkgElem swiper-container-horizontal"
                        >
                            <div class="swiper-wrapper">
                                <!---单个商品-->
                                @foreach ($goods as $good)
                                    <article
                                        class="carrouselProductCard swiper-slide tst-productCard swiper-slide-active"
                                        style="width: 248.195px; margin-right: 6px;"><a
                                            href="{{action('GoodsController@info', ['id' => $good->id])}}"
                                            title="nylon tracksuit jacket" aria-label="nylon tracksuit jacket"
                                            class="generic carrouselProductCardImgLink tst-url">
                                            <div class="carrouselProductCardImgWrapper"><img
                                                    src="{{$good->getGoodsThumbUrl()}}" alt="nylon tracksuit jacket"
                                                    class="carrouselProductCardImg tst-img carrouselProductCardImg--loaded">
                                            </div>
                                        </a>
                                        <a href="{{action('GoodsController@info', ['id' => $good->id])}}"
                                           title="{{$good->goods_name}}" class="carrouselProductCardCnt tst-url">
                                            <h5 itemprop="brand"
                                                class="font-Mcondensed brand carrouselProductCardCntTitle tst-brand"></h5>
                                            <p itemprop="name"
                                               class="font-M carrouselProductCardCntSubtitle tst-description">{{$good->goods_name}}</p>
                                            <p class="font-M carrouselProductCardCntPrice"><span
                                                    class="tst-price">${{$good->goods_price}}</span>
                                            </p></a>
                                    </article>
                            @endforeach

                            <!---end 单个商品-->
                            </div>
                            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                        </div>
                        <a href="/pages/all-categories" class="moduleSet__cta tst-cta"
                           title="Shop now" aria-label="Shop now">
                            <button class="button-black" aria-label="hidden">Shop now</button>
                        </a></section>
                </div>
            </div>
            <!--two-slots-left 三个广告盒子图片-->
            @if ($category_one)
                <div class="row two-slots-left tst-row">
                    <!--第一行 单个广告图片-->
                    <div class="slot col6 col-md-6 col-sm-12 col-xs-12 tst-slot">
                        <div class="module "><a
                                href="{{action('CollectionController@cat', ['cat' => $category_one->id])}}"
                                title="Off-White" aria-label="Off-White"
                                class="module__link module__wrapper module__articleContainer no-underline tst-module tst-article">
                                <article class="module__contentContainer  module--article">
                                    <figure
                                        class="reset-lineHeight module__image no-underline resp-ratio  FF1E848C11B1BB52D5D0">
                                        <picture class="module__media resp-img tst-bkgElem tst-image lazy-loaded"

                                        >
                                            <img class="resp-img lazy-loaded" src="{{$category_one->getThumbUrl()}}"
                                                 data-src-base="" alt=""></picture>
                                    </figure>
                                    <div class="module__content  tst-cntElem-wrapper">
                                        <div class="module__contentGroup module__contentGroup--pos-cc"><span
                                                class="module__ce module__title color-white module__ce--f-xs-18 module__ce--f-sm-18 module__ce--f36 bold tst-cntElem tst-title"
                                            >Off-White</span> <span
                                                class="black-gradient module__ce module__title color-white module__ce--f-xs-18 module__ce--f-sm-18 module__ce--f30 bold tst-cntElem tst-title"
                                            >100+ new arrivals</span>
                                            <div class="module__ce module__ctaGroup"><p
                                                    class="module__ce module__cta bold module__ce--f13 color-white  tst-cntElem tst-cta"
                                                ><span class="module__ctaLabel black-gradient">Shop now</span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            </a></div>
                    </div>
                </div>

                <div class="clearfix"></div>
        @endif
        @if ($category_two)
            <!--二个广告图片-->
                <div class="row two-slots tst-row mt75">
                    <!--占位布局-->
                    <div class="slot col1 col-sm-12 col-xs-12 tst-slot"></div>
                    <!--图片2-->
                    <div class="slot col5 col-sm-12 col-xs-12 tst-slot">
                        <div class="module "><a
                                href="{{action('CollectionController@cat', ['cat' => $category_two->id])}}"
                                title="{{$category_two->name}}"
                                aria-label="Feeling outdoorsy? 40+ windbreakers"
                                class="module__link module__wrapper module__articleContainer no-underline tst-module tst-article">
                                <article class="module__contentContainer  module--article">
                                    <figure
                                        class="reset-lineHeight module__image no-underline resp-ratio  FF1E848C11B1BB5216826">
                                        <picture class="module__media resp-img tst-bkgElem tst-image lazy-loaded"

                                        >
                                            <img class="resp-img lazy-loaded" src="{{$category_two->getThumbUrl()}}"
                                                 alt="">
                                        </picture>
                                    </figure>
                                    <div class="module__content  tst-cntElem-wrapper">
                                        <div class="module__contentGroup module__contentGroup--pos-bc"><span
                                                class="module__ce module__title color-white module__ce--f-xs-18 module__ce--f-sm-18 module__ce--f30 bold tst-cntElem tst-title"
                                            ></span>
                                            <div class="module__ce module__ctaGroup"><p
                                                    class="module__ce module__cta bold module__ce--f13 color-white  tst-cntElem tst-cta"
                                                ><span class="module__ctaLabel"></span>
                                                </p></div>
                                        </div>
                                    </div>
                                </article>
                            </a></div>
                    </div>
                @endif
                <!--图片3-->
                    @if ($category_three)
                        <div class="slot col5 col-sm-12 col-xs-12 tst-slot">
                            <div class="module "><a
                                    href="{{action('CollectionController@cat', ['cat' => $category_two->id])}}"
                                    title="Givenchy" aria-label="Givenchy"
                                    class="module__link module__wrapper module__articleContainer no-underline tst-module tst-article">
                                    <article class="module__contentContainer  module--article">
                                        <figure
                                            class="reset-lineHeight module__image no-underline resp-ratio  FF1E848C11B1BB5216826">
                                            <picture class="module__media resp-img tst-bkgElem tst-image lazy-loaded"

                                            >
                                                <img class="resp-img lazy-loaded"
                                                     src="{{$category_three->getThumbUrl()}}"

                                                     alt=""></picture>
                                        </figure>
                                        <div class="module__content  tst-cntElem-wrapper">
                                            <div class="module__contentGroup module__contentGroup--pos-bc"><span
                                                    class="module__ce module__title color-white module__ce--f-xs-18 module__ce--f-sm-18 module__ce--f30 bold tst-cntElem tst-title"
                                                ></span> <span
                                                    class="module__ce module__title color-white module__ce--f-xs-18 module__ce--f-sm-18 module__ce--f24 bold tst-cntElem tst-title"
                                                ></span>
                                                <div class="module__ce module__ctaGroup"><p
                                                        class="module__ce module__cta bold module__ce--f13 color-white  tst-cntElem tst-cta"
                                                    ><span class="module__ctaLabel"></span>
                                                    </p></div>
                                            </div>
                                        </div>
                                    </article>
                                </a></div>
                        </div>
                @endif
                <!--占位布局-->
                    <div class="slot col1 col-sm-12 col-xs-12 tst-slot"></div>
                </div>
                <!--商品列表 最多5个商品-->
                <div class="row one-slot tst-row">
                    <div class="slot col12 tst-slot">
                        <section class="moduleSet tst-module tst-set">
                            <div
                                class="moduleSet__prods moduleSet__prods--carrousel tst-bkgElem swiper-container-horizontal"
                            >
                                <div class="swiper-wrapper">
                                    <!---单个商品-->
                                    @foreach ($goods_two as $good)
                                        <article
                                            class="carrouselProductCard swiper-slide tst-productCard swiper-slide-active"
                                            style="width: 248.195px; margin-right: 6px;"><a
                                                href="{{action('GoodsController@info', ['id' => $good->id])}}"
                                                title="nylon tracksuit jacket" aria-label="nylon tracksuit jacket"
                                                class="generic carrouselProductCardImgLink tst-url">
                                                <div class="carrouselProductCardImgWrapper"><img
                                                        src="{{$good->getGoodsThumbUrl()}}" alt="nylon tracksuit jacket"
                                                        class="carrouselProductCardImg tst-img carrouselProductCardImg--loaded">
                                                </div>
                                            </a>
                                            <a href="{{action('GoodsController@info', ['id' => $good->id])}}"
                                               title="{{$good->goods_name}}" class="carrouselProductCardCnt tst-url">
                                                <h5 itemprop="brand"
                                                    class="font-Mcondensed brand carrouselProductCardCntTitle tst-brand"></h5>
                                                <p itemprop="name"
                                                   class="font-M carrouselProductCardCntSubtitle tst-description">{{$good->goods_name}}</p>
                                                <p class="font-M carrouselProductCardCntPrice"><span
                                                        class="tst-price">${{$good->goods_price}}</span>
                                                </p></a>
                                        </article>
                                    @endforeach
                                    <!---end 单个商品-->
                                </div>
                                <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                            </div>
                            <!--立刻购买按钮-->
                            <a href="/pages/all-categories" class="moduleSet__cta tst-cta"
                               title="Shop now" aria-label="Shop now">
                                <button class="button-black" aria-label="hidden">Shop now</button>
                            </a></section>
                    </div>
                </div>
                <!--商品类别图 2个-->
                <div class="row two-slots tst-row">
                    <!--占位布局-->
                    <div class="slot col1 col-sm-12 col-xs-12 tst-slot"></div>
                    @foreach ($cats as $cat)
                        <!--per 盒子-->
                            <div class="slot col5 col-sm-12 col-xs-12 tst-slot">
                                <div class="module "><a href="{{action('CollectionController@cat', ['cat' => $cat->id])}}"
                                                        title="The world’s best sneakers"
                                                        aria-label="The world’s best sneakers"
                                                        class="module__link module__wrapper module__articleContainer no-underline tst-module tst-article">
                                        <article class="module__contentContainer  module--article">
                                            <figure
                                                class="reset-lineHeight module__image no-underline resp-ratio  FF1E848C11B1B2F516826">
                                                <picture class="module__media resp-img tst-bkgElem tst-image lazy-loaded"
                                                >
                                                    <img class="resp-img lazy-loaded" src="{{$cat->getThumbUrl()}}"

                                                         alt=""></picture>
                                            </figure>
                                            <div class="module__content  tst-cntElem-wrapper">
                                                <div class="module__contentGroup module__contentGroup--pos-bc"><span
                                                        class="module__ce module__title color-black module__ce--f-xs-18 module__ce--f-sm-18 module__ce--f30 bold tst-cntElem tst-title"
                                                    ></span>
                                                    <div class="module__ce module__ctaGroup"><p
                                                            class="module__ce module__cta bold module__ce--f13 color-black  tst-cntElem tst-cta"
                                                        ><span class="module__ctaLabel"></span>
                                                        </p></div>
                                                </div>
                                            </div>
                                        </article>
                                    </a></div>
                            </div>
                    @endforeach


                    <!--占位布局-->
                    <div class="slot col1 col-sm-12 col-xs-12 tst-slot"></div>
                </div>

                <!--****新品广告层 2个-->
                <!--版块标题-->
                <div class="row one-slot tst-row">
                    <div class="slot col12 tst-slot">
                        <div class="module "><a href="/pages/all-categories"
                                                title="New season" aria-label="New season"
                                                class="module__link module__wrapper module__articleContainer no-underline tst-module tst-article">
                                <article class="module__contentContainer  module--article">
                                    <figure
                                        class="reset-lineHeight module__image no-underline resp-ratio  FF61A852C2654D571B">
                                        <picture class="module__media resp-img tst-bkgElem tst-image lazy-loaded"

                                        >
                                            <img class="resp-img lazy-loaded top-products"
                                                 src="./images/top-products.png"

                                                 alt=""></picture>
                                    </figure>
                                    <!--版块标题-->
                                    <div class="module__content  tst-cntElem-wrapper">
                                        <div class="module__contentGroup module__contentGroup--pos-tc"><span
                                                class="module__ce module__title color-black module__ce--f-xs-18 module__ce--f-sm-18 module__ce--f30 bold tst-cntElem tst-title"
                                            >New season</span></div>
                                    </div>
                                </article>
                            </a></div>
                    </div>
                </div>
                <!--版块图片-->
                <div class="row two-slots tst-row bottom-home-images">
                    <!--占位布局-->
                    <div class="slot col1 col-sm-12 col-xs-12 tst-slot"></div>
                    <!--图片2-->
                    @foreach ($top as $good)
                        <div class="slot col5 col-sm-12 col-xs-12 tst-slot">
                            <div class="module "><a href="{{action('GoodsController@info', ['id' => $good->id])}}"
                                                    title="{{$good->goods_name}}"
                                                    aria-label="Shop Portable air conditioners"
                                                    class="module__link module__wrapper module__articleContainer no-underline tst-module tst-article">
                                    <article class="module__contentContainer  module--article">
                                        <figure
                                            class="reset-lineHeight module__image no-underline resp-ratio  FF1E848C11B1BB5216826">
                                            <picture class="module__media resp-img tst-bkgElem tst-image lazy-loaded"

                                            >
                                                <img class="resp-img lazy-loaded"
                                                     src="{{$good->getGoodsThumbUrl()}}" alt=""></picture>
                                        </figure>
                                        <div class="module__content  tst-cntElem-wrapper">
                                            <div class="module__contentGroup module__contentGroup--pos-bc"><span
                                                    class="module__ce module__title color-white module__ce--f-xs-18 module__ce--f-sm-18 module__ce--f30 bold tst-cntElem tst-title"
                                                ></span>
                                                <div class="module__ce module__ctaGroup"><p
                                                        class="module__ce module__cta bold module__ce--f13 color-white  tst-cntElem tst-cta"
                                                    ><span class="module__ctaLabel"></span>
                                                    </p></div>
                                            </div>
                                        </div>
                                    </article>
                                </a></div>
                        </div>
                    @endforeach
                    <!--占位布局-->
                    <div class="slot col1 col-sm-12 col-xs-12 tst-slot"></div>
                </div>

                <!--****end 新品广告层 2个-->
        </div>
    </div>     <!-- Newsletter Subscriber Modal -->
@endsection
